<template>
	<view class="cu-modal bottom-modal show allcontent" v-if="modalName" style="width: 35vw;margin: 0 auto;margin-bottom: 2vh;">
		<view class="cu-dialog bg-white">
			<view class="cu-bar bg-white" style="justify-content: flex-end;">
				<!-- <view class="action text-green" @tap="hideModal">确定</view> -->
				<view class="action text-green" @tap="hideModal">确定</view>
			</view>
			<!-- <view class="padding-xl"> -->
			<view class="modal_content">
				<view v-for="(item,index) in All_commonentList" :key="index">
					<comment :content='item.content' :avatar='item.avatar' :name='item.username' :time='item.createTime'
						:id='item.id' type=1 :createid='item.createBy'></comment>
				</view>
				<!-- </view> -->
				<view class="more" v-if="more" @click="getMore">
					查看更多……
				</view>
				<view class="more" v-else>
					没有更多了
				</view>
			</view>
			<view class="cu-bar input" style="width: 35vw;border: 0.5px solid 	#FFF8DC;" v-if="showInput">
				<input class="solid-bottom" :adjust-position="true" :focus="false" maxlength="300" cursor-spacing="10"
					style="text-align: start;" v-model="commentValue" />
				<button class="cu-btn bg-green shadow" @click="subComment">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import comment from '@/subpkg/components/comment.vue'
	import {
		getcommonents,
		postcomment
	} from '@/store/api.js'
	export default {
		mounted() {
			uni.$on('showCommentDialog', value => {
				this.mesid = value
				getcommonents(value, this.nowPage, 3).then(res => {
					if (res.total == 0) {
						this.more = false
					}
					this.fatotal = res.data.data.total

					this.nowPage++
					// console.log('这个是评论列表')
					console.log(res.data)
					res.data.data.rows.forEach(item => {
						this.All_commonentList.push(item)
					})
					this.modalName = true
					if (this.All_commonentList.length == this.fatotal) {
						this.more = false
					}
				}).catch(err => {
					console.log(err)
				})
			})
			uni.$on('CommentAll', value => {
				this.showInput = true
				this.commentOther.id = value.id
				this.commentOther.userid = value.userid
				this.commentOther.rootid = value.rootid
			})
		},
		data() {
			return {
				nowPage: 1,
				fatotal: 0,
				All_commonentList: [],
				more: true,
				commentValue: '',
				modalName: false,
				showInput: false,
				mesid: '',
				commentOther: {
					rootid: '',
					id: '',
					userid: ''
				}
			}
		},
		components: {
			comment
		},
		methods: {
			subComment() {
				let data = {
					postId: this.mesid,
					type: 0,
					rootId: this.commentOther.rootid,
					toCommentId: this.commentOther.id,
					toCommentUserId: this.commentOther.userid,
					content: this.commentValue
				}
				postcomment(data).then(res=>{
					uni.$emit('sendFinish',this.commentOther.rootid)
				})
				
				this.showInput = false
				this.commentValue = ''
			},
			hideModal() {
				this.modalName = false
				this.showInput = false
				this.more=true
				this.All_commonentList = []
				this.nowPage = 1
			},
			getMore() {
				getcommonents(this.mesid, this.nowPage, 3).then(res => {
					if (res.total == 0) {
						this.more = false
					}
					this.nowPage++
					// console.log('这个是评论列表')
					console.log(res.data)
					res.data.data.rows.forEach(item => {
						this.All_commonentList.push(item)
					})
					this.modalName = true
					if (this.All_commonentList.length == this.fatotal) {
						this.more = false
					}
					console.log(this.fatotal)
					console.log(this.All_commonentList.length)
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	.more {
		text-align: center;
	}

	.modal_content {
		max-height: 80vh;
		overflow-y: auto;
	}
</style>